<template>
  <div>
    <el-dialog :title="title" :visible.sync="detailvisible" width="800px" append-to-body class="my-dialog"
               @close="cancel" :close-on-click-modal="false">
      <div>
        <div class="log-line mb10">
          <h2>出勤信息</h2>
          <el-row>
            <el-col :span="12">
              <div class="log-list log-img-line">
                <span class="log-list-title">
                  保安
                </span>
                <p class="log-list-img">
                  <img src="@/assets/images/no_pic.png" alt=""> {{ userDetail ? userDetail.nickName : '' }}
                </p>
              </div>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <div class="log-list log-img-line">-->
            <!--                <span class="log-list-title">-->
            <!--                  当前出勤状态-->
            <!--                </span>-->
            <!--                <span class="log-list-status">下班未打卡</span>-->
            <!--              </div>-->
            <!--            </el-col>-->
            <el-col :span="12">
              <div class="log-list">
                <span class="log-list-title">
                  驻点
                </span>
                {{ pointsData ? pointsData.name : '' }}
              </div>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <div class="log-list">-->
            <!--                <span class="log-list-title">-->
            <!--                  岗位-->
            <!--                </span>-->
            <!--                监视岗-->
            <!--              </div>-->
            <!--            </el-col>-->
            <el-col :span="12" v-if="type == 'point'">
              <div class="log-list" v-if="attendLog && attendLog.cateId">
                <span class="log-list-title">
                  班次
                </span>
                {{ attendLog ? attendLog.cate.name : '' }}
              </div>
              <div class="log-list" v-else>
                <span class="log-list-title">
                  班次
                </span>
                休息
              </div>
            </el-col>
            <el-col :span="12" v-else>
              <div class="log-list" v-if="attendLog && attendLog.cate">
                <span class="log-list-title">
                  班次
                </span>
                {{ attendLog ? attendLog.cate.name : '' }}
              </div>
              <div class="log-list" v-else>
                <span class="log-list-title">
                  班次
                </span>
                休息
              </div>
            </el-col>
            <el-col :span="12">
              <div class="log-list">
                <span class="log-list-title">
                  日期
                </span>
                {{ attendLog ? attendLog.dayName : '' }}
              </div>
            </el-col>
            <el-col :span="12" v-if="type == 'point'">
              <div class="log-list" v-if="attendLog && attendLog.cateId">
                <span class="log-list-title">
                  出勤时间
                </span>
                <span v-if="attendLog">
                  {{
                    `${attendLog.cate.comeTime1}-${attendLog.cate.outNext1 ? '次日' : ''}${attendLog.cate.outTime1} ${attendLog.cate.comeTime2 && attendLog.cate.comeNext2 ? '次日' : ''}${attendLog.comeTime2 || ''}${attendLog.cate.comeTime2 ? '-' : ''}${attendLog.cate.outTime2 && attendLog.cate.outNext2 ? '次日' : ''}${attendLog.cate.outTime2 || ''}`
                  }}
                </span>
              </div>
              <div class="log-list" v-else>
                <span class="log-list-title">
                  出勤时间
                </span>
                休息
              </div>
            </el-col>
            <el-col :span="12" v-else>
              <div class="log-list" v-if="attendLog && attendLog.cate">
                <span class="log-list-title">
                  出勤时间
                </span>
                <span v-if="attendLog">
                  {{
                    `${attendLog.cate.comeTime1}-${attendLog.cate.outNext1 ? '次日' : ''}${attendLog.cate.outTime1} ${attendLog.cate.comeTime2 && attendLog.cate.comeNext2 ? '次日' : ''}${attendLog.comeTime2 || ''}${attendLog.cate.comeTime2 ? '-' : ''}${attendLog.cate.outTime2 && attendLog.cate.outNext2 ? '次日' : ''}${attendLog.cate.outTime2 || ''}`
                  }}
                </span>
              </div>
              <div class="log-list" v-else>
                <span class="log-list-title">
                  出勤时间
                </span>
                休息
              </div>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <div class="log-list">-->
            <!--                <span class="log-list-title">-->
            <!--                  在岗类型-->
            <!--                </span>-->
            <!--                主岗-->
            <!--              </div>-->
            <!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <div class="log-list">-->
<!--                <span class="log-list-title">-->
<!--                  职务-->
<!--                </span>-->
<!--                <dict-tag v-if="userPointData" :options="dict.type.sys_work_post" :value="userPointData.duties"/>-->
<!--              </div>-->
<!--            </el-col>-->
            <!--            <el-col :span="12">-->
            <!--              <div class="log-list">-->
            <!--                <span class="log-list-title">-->
            <!--                  当前请假状态-->
            <!--                </span>-->
            <!--                无请假-->
            <!--              </div>-->
            <!--            </el-col>-->
          </el-row>
        </div>
        <div class="log-line">
          <h2>打卡记录</h2>
          <div class="log-table">
            <el-table
              v-loading="loading"
              :data="logList"
            >
              <el-table-column label="打卡时间" align="center" prop="signTime"/>
              <el-table-column label="打卡状态" align="center" prop="nickName">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status=='正常'?'success':'danger'" size="mini">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel" size="small" plain>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getInfoNew} from "@/api/login";
import {listStagnationPointUser} from "@/api/system/stagnation_point";

export default {
  name: "index",
  props: ['visible', 'attendLog', 'userId', 'pointsId', 'pointsData', 'type'], // param 执勤点信息
  dicts: ['sys_stagnation_type', 'sys_work_post'],
  components: {},
  data() {
    return {
      detailvisible: false,
      title: '考勤详情',
      logList: [],
      loading: false,
      logDetail: null,
      userDetail: null,
      userPointData: null
    }
  },
  watch: {
    visible() {
      this.detailvisible = this.visible
      if (this.visible) {
        // point 从执勤点丹铅排班进入
        console.log('type===>', this.type)
        console.log('attendLog:', this.attendLog)
        // type=point 驻点考勤进入的
        if (this.type !== 'point') {
          for (let item of this.attendLog.signs) {
            // signs - type 1 / 3 上班，2 / 4 下班
            // latTime 大于0 迟到时间/早退时间
            if (item.latTime == 0) {
              item.status = '正常'
            } else {
              if (item.type == 1 || item.type == 3) {
                item.status = '上班迟到'
              } else if (item.type == 2 || item.type == 4) {
                item.status = '下班早退'
              }
            }
          }
          this.logList = this.$deepCopy(this.attendLog.signs)
          this.logDetail = this.$deepCopy(this.attendLog)
        }
        this.getUserDetail()
        this.getUserPost()
      } else {
      }
    }
  },
  created() {
  },
  methods: {
    /** 查询单个用户详情 */
    getUserDetail() {
      getInfoNew(this.userId).then(res => {
        this.userDetail = res.data
      })
    },
    getUserPost() {
      // 他在该考勤组的岗位信息
      listStagnationPointUser({userId: this.userId, pointsId: this.pointsId,}).then(res => {
        this.userPointData = this.$deepCopy(res.rows[0])
      })
    },
    cancel() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
h2 {
  font-size: 16px;
}

.log-list {
  display: flex;
  align-items: center;
  color: #000;
  margin-bottom: 10px;
}

.log-list img {
  width: 40px;
  margin-right: 10px;
}

.log-list-title {
  display: block;
  width: 90px;
  color: #999;
}

.log-list-img {
  display: flex;
  align-items: center;
  margin: 0;
}

.log-list-status {
  height: 30px;
  display: block;
  background: #1ab394;
  line-height: 30px;
  font-size: 12px;
  border-radius: 20px;
  padding: 0 10px;
  color: #fff;
}

.log-img-line {
  height: 50px;
}

.log-line {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
}
</style>
